<template>
	<Container>
		<view class="header">
			<view class="article" v-for="(item, index) in assignment.articles" :key="index">
				<view
					:class="{ number: item.type === 'number' || item.type === 'word', image: item.type === 'tag' || item.type === 'article' }"
					v-for="(items, iIndex) in item.items"
					:key="iIndex"
				>
					<view v-if="item.type === 'number' || item.type === 'word'">{{ items.value }}</view>
					<image v-if="item.type === 'tag' || item.type === 'article'" :src="items.imageUrl" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<Question :question="assignment.questionName" />
		<Record ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerLimitMs="assignment.answerLimitMs" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	flex-direction column
	position relative
	.article
		width 100%
		height 25%
		display flex
		justify-content center
		align-items center
		.number
			width 14.25%
			height 100%
			display flex
			justify-content center
			align-items center
			font-size 6vh
		.image
			width 20%
			height 100%
			display flex
			justify-content center
			align-items center
			image
				width 85%
				height 85%
				filter drop-shadow(0 0 5rpx #c4c4c4)
</style>
